<template>
	<view class="detail-container" v-if="data.list">
		<navBar title='兼职详情'></navBar>
		<view class="detail-main">
			<view class="main-card">
				<view class="card-title">
					<view class="title-left">
						<view class="left-name">{{ data.list.appWorkOrder.positionName }}</view>
						<view class="left-border">
							<view class="border-item">{{ setName1(data.list.appWorkOrder.onlineOffline) }}</view>
							<!-- <view class="border-item">{{ setName(data.list.appWorkOrder.settleType) }}</view> -->
						</view>
					</view>
					<view class="title-right">{{ setState(data.list.appWorkOrder.state) }}</view>
				</view>
				<view class="card-num">
					<view class="num-money">{{ data.list.appWorkOrder.price }}{{ data.list.appWorkOrder.unitText ? '/ ' + data.list.appWorkOrder.unitText : '' }}</view>
					<view class="num-time">{{ data.list.appWorkOrder.count }}{{ data.list.appWorkOrder.unitText ? data.list.appWorkOrder.unitText : '' }}</view>
				</view>
				<view class="crad-info">
					<view class="info-user">
						<image :src="httpUrl+'/app/file/viewFile?fileId='+data.list.bossUser.avatarId" mode="">
						</image>
						<view class="info-text">
							<view class="info-name">{{ data.list.bossUser.userName }}</view>
							<view class="info-type">雇主</view>
						</view>
					</view>
					<view class="info-money">
						<view class="money-text">
							<view class="hj">合计：</view>
							<view class="num">{{ data.list.appWorkOrder.totalAmount }}元</view>
						</view>
						<view class="money-fs">{{ setFs(data.list.appWorkOrder.settleType) }}</view>
					</view>
				</view>
				<view class="card-address">
					<view class="address-item"><text>地址：</text><text>{{ data.list.appWorkOrder.workAddress }}</text>
					</view>
					<view class="address-item"><text>订单号：</text><text></text>{{ data.list.appWorkOrder.orderNo }}</view>
				</view>
			</view>
			<!-- 任职要求 -->
			<view class="main-yq">
				<view class="yq-title">任职要求</view>
				<view class="ya-desc">
					{{ data.list.appWorkOrder.requireSkill }}
				</view>
			</view>
			<!-- 工作要求 -->
			<view class="main-yq">
				<view class="yq-title">工作要求</view>
				<view class="ya-desc">{{ data.list.appWorkOrder.workPositionDesc }}</view>
			</view>
			<!-- 图片凭证 -->
			<view class="main-yq">
				<view class="yq-title">图片凭证</view>
				<view class="yq-upload" v-if="!data.list.appWorkOrder.attachmentIds">
					<view class="imageList">
						<view v-if="imgList.length > 0" class="imgWrap" v-for="(item,index) in imgList" :key="index">
							<image mode="aspectFill" class="img" @tap="previewImage(index)" :src="item"></image>
							<image class="close" @tap="close(index)" src="@/static/img/icon_close.png"></image>
						</view>
						<view v-if="imgList.length < 9" @tap="chooseImg" class="imgWrap addImg">
							<image style="width: 64rpx;height: 64rpx;" src="@/static/img/base-icon-camera.png"></image>
							<text style="color: #595959;font-size: 28rpx;margin-top: 8rpx;">上传照片</text>
						</view>
					</view>
				</view>
				<view class="yq-upload" v-else>
					<view class="upload-item" v-for="(v, ind) in data.list.imgs" :key="ind" @tap="previewImages(index)">
						<image :src="httpUrl+'/app/file/viewFile?fileId='+ v " mode="widthFix"></image>
					</view>

				</view>
			</view>
			<!-- 双方评价 -->
			<view class="main-yq">
				<view class="yq-title">双方评价</view>
				<view class="ya-pj">
					<view class="pj-item">我的评价 <uni-rate class="mg-lf20" readonly
							:value="data.list.appWorkOrder.scoreForBoss" color="#bbb" active-color="#6B64D3" /></view>
					<view class="pj-item">雇主评价 <uni-rate class="mg-lf20" readonly
							:value="data.list.appWorkOrder.scoreForEmp" color="#bbb" active-color="#6B64D3" /></view>
				</view>
			</view>
			<!-- 其他信息 -->
			<view class="main-yq">
				<view class="yq-title">其他信息</view>
				<view class="yq-time">
					<view class="time-item"><text>创建时间</text><text>{{ data.list.appWorkOrder.createTime }}</text></view>
					<view class="time-item"><text>接单时间</text><text>{{ data.list.appWorkOrder.startTime }}</text></view>
					<view class="time-item"><text>完成时间</text><text>{{ data.list.appWorkOrder.endTime }}</text></view>
				</view>
			</view>
		</view>
		<view class="btn" v-if="data.list.appWorkOrder.state !=='COMPLETE_OK' && data.list.appWorkOrder.state !=='INVALID'">
			<button v-if="data.list.appWorkOrder.state === 'PENDING_ORDERS' && type === 0" class="btns"
				@click.stop="jumpCate(1)">立即付款</button>
			<button class="btns" v-if="data.list.appWorkOrder.state === 'HAVE_IN_HAND' && type === 1"
				@click.stop="jumpCate(2)">完成</button>
		</view>
		<u-popup :round="20" :zIndex="9999" :show="data.show" @close="data.show = false">
			<view class="confirmOrderBottom">
				<view class="top">
					<text></text>
					支付
					<image @tap="data.show = false" src="/static/img/index/101.png" mode="widthFix"></image>
				</view>
				<view class="confirmOrderBottom_1">
					<view v-for="(item,index) in paymentChannels" :key="index" class=""
						@tap="data.payChannel = item.value">
						<view class="left">
							<image :src="'/static/img/index/'+item.icon+'.png'" mode="widthFix"></image>
							{{item.name}}
						</view>
						<image
							:src="data.payChannel == item.value?'/static/img/index/49.png':'/static/img/index/52.png'"
							mode="widthFix">
						</image>
					</view>
				</view>
				<view class="bot">
					<view class="left">
						实付现金（元）
						<text>{{data.list.appWorkOrder.totalAmount}}</text>
					</view>
					<view class="right" @tap="pay">
						立即支付
					</view>
				</view>
			</view>
		</u-popup>
		<SanshuiPaymentPassword v-if="data.show1" :onConfirm="data.onConfirm"  :onCancel="()=>{data.show1 = false}" />
	</view>
</template>

<script setup>
	import SanshuiPaymentPassword from '@/components/sanshui-payment-password/sanshui-payment-password.vue'
	import {
		ref,
		reactive,
		onMounted,
	} from 'vue'
	import navBar from '@/components/navBar.vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getStatusBarHeight
	} from '@/utils/common/common.js'
	import {
		paymentChannels,
		payment
	} from '@/utils/index'
	import api from '@/utils/api/recruit.js'
	import {
		showToast
	} from '../../utils/toast'
	import {
		setDialogView
	} from '@/utils/dialogView.ts'
	const barHeight = ref(null)
	onLoad(res => {
		if (res.data) {
			let obj = JSON.parse(res.data)
			zwId.value = obj.id
			type.value = obj.gzType
		}
		barHeight.value = getStatusBarHeight()
	})
	onMounted(_ => {
		getDetail()
	})
	const type = ref(null)
	const imgList = ref([])
	const fsRef = ref(null)
	const httpUrl = getApp().globalData.baseUrl
	// 数据
	const data = reactive({
		onConfirm:()=>{},
		list: {},
		topArr: [{
			n: '全部',
			id: ''
		}, {
			n: '待付款',
			id: 'WAIT_PAY'
		}, {
			n: '待收货',
			id: 'WAIT_RECEIVE'
		}, {
			n: '已完成',
			id: 'COMPLETE'
		}, {
			n: '已取消',
			id: 'CANCEL'
		}],
		index: 0,
		obj: {
			pageSize: 10,
			pageNo: 1,
			orderState: ''
		},
		result: {},
		httpUrl: getApp().globalData.baseUrl,
		payChannel: paymentChannels[0].value,
		payInfo: {},
		info: {},

	})
	// 打开地图
	const openMap = _ => {
		setDialogView('ACCESS_FINE_LOCATION').then((res)=>{
			if(res == 1){
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function(res) {
						const latitude = res.latitude;
						const longitude = res.longitude;
						uni.openLocation({
							latitude: latitude,
							longitude: longitude,
							name: data.list.workAddress,
							success: function() {
								console.log('success');
							}
						});
					}
				});
			}
		})
		
	}
	// 预览图片
	const previewImage = (index) => {
		uni.previewImage({
			urls: imgList.value,
			current: index
		});
	}
	// 预览图片
	const previewImages = (ind) => {
		const imgList = data.list.imgs.map((item) => {
			return `${httpUrl}/app/file/viewFile?fileId=${item}`
		})
		uni.previewImage({
			urls: imgList,
			current: ind,
			longPressActions: {
				itemList: ['保存图片'],
				success: function(data) {
					uni.closePreviewImage()
					// 获取当前长按的图片 URL  
					const currentImageUrl = imgList[data.index];
					// 调用保存图片到相册的接口  
					uni.saveImageToPhotosAlbum({
						filePath: currentImageUrl,
						success: function() {
							uni.showToast({
								title: '保存成功',
								icon: 'none'
							});
						},
						fail: function(err) {
							console.error(err);
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							});
						}
					});
				}
			}
		});
	}
	const setName = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'FULL_TIME':
				return '全职';
			case 'PART_TIME_JOB':
				return '兼职';
			default:
				return '未知';
		}
	}
	const setState = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'PENDING_ORDERS':
				return '待确认';
			case 'HAVE_IN_HAND':
				return '进行中';
			case 'CANCELLED':
				return '已取消';
			case 'COMPLETED':
				return '确认中';
			case 'EVALUATED':
				return '待评价';
			case 'COMPLETE_OK':
				return '已完成';
			case 'INVALID':
				return '已失效';
			default:
				return '未知';
		}
	}
	const setName1 = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'OFFLINE':
				return '线下';
			case 'ONLINE':
				return '线上';
			default:
				return '未知';
		}
	}
	const setFs = (positionName) => {
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'SINGLE_SETTLEMENT':
				return '单结';
			case 'DAILY_SETTLEMENT':
				return '日结';
			case 'MONTHLY_SETTLEMENT':
				return '月结';
			default:
				return '未知';
		}
	}
	// 学历
	const setXl = (positionName) => {
		console.log(positionName);
		// 根据 positionName 返回不同的文字
		switch (positionName) {
			case 'NONE':
				return '不限';
			case 'PRIMARY_SCHOOL':
				return '小学';
			case 'JUNIOR_HIGH_SCHOOL':
				return '初中';
			case 'HIGH_SCHOOL':
				return '高中/中专/技校';
			case 'JUNIOR_COLLEGE':
				return '大专';
			case 'UNDERGRADUATE':
				return '本科';
			case 'GRADUATE_STUDENT':
				return '研究生';
			case 'DOCTOR':
				return '博士';
			case 'PROFESSOR':
				return '教授/专家';
			default:
				return '未知';
		}
	}
	const zwId = ref(null)
	// 获取职位详情
	const getDetail = async _ => {
		const res = await api.queryWorkOrderDetails(zwId.value)
		data.list = res.data
		data.list.imgs = data.list.appWorkOrder.attachmentIds ? data.list.appWorkOrder.attachmentIds.split(',') :
		[]
		console.log(res, '=44554545');
	}
	// 返回
	const goto = _ => uni.navigateBack()
	// 立即付款
	const jumpCate = index => {
		if (index === 1) {
			data.show = true
		} else {
			completeSubmit()
		}

	}
	// 完成提交
	const completeSubmit = async _ => {
		if (imgList.value.length === 0) {
			return showToast('请先上传凭证')
		}
		const uploadPromises = imgList.value.map((item) => {
			return uni.uploadFile({
				url: `${getApp().globalData.baseUrl}/app/file/uploadFile`,
				filePath: item,
				name: 'file'
			});
		});
		const results = await Promise.all(uploadPromises)
		const dataResults = results.map(result => JSON.parse(result.data).data.fileId).join(',');
		let data = {
			id: zwId.value,
			state: 'COMPLETED',
			attachmentIds: dataResults
		}
		const res = await api.updateWorkOrderState(data)
		if (res.code === 200) {
			showToast(res.msg)
			uni.$emit('refSh')
		}
	}

	const pay = async _ => {
		data.show = false;

		let datas = {
			workOrderNo: data.list.appWorkOrder.orderNo,
			payChannel: data.payChannel
		}
		if (data.payChannel == 'WALLET') {
				data.onConfirm = async (e) => {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					const res = await api.payWorkOrder({
						...datas,
						payPwd: e
					})
					if (res.code == 200) {
						payment(data.payChannel, res.data).then((ress) => {
							// data.payInfo.orderState.value = 'WAIT_SEND'
							uni.navigateBack()
							uni.$emit('refshz')
						})
						uni.hideLoading()

					}
				}
			return
		}
		uni.showLoading({
			title: '加载中...',
			mask: true
		})
		const res = await api.payWorkOrder(datas)
		if (res.code == 200) {
			payment(data.payChannel, res.data).then((ress) => {
				// data.payInfo.orderState.value = 'WAIT_SEND'
				uni.navigateBack()
				uni.$emit('refshz')
			})
			uni.hideLoading()

		}
	}
	const chooseImg = () => {
		if (type.value !== 1) {
			return showToast('凭证为服务者上传!')
		}
		setDialogView('READ_EXTERNAL_STORAGE').then(res=>{
			if(res == 1){
				uni.chooseImage({
					count: 9 - imgList.value.length,
					sourceType: ["album"],
					success: (chooseImageRes) => {
						if (imgList.value.length + chooseImageRes.tempFilePaths.length > 9) {
							uni.showToast({
								title: '最多上传9张图片',
								icon: 'none'
							});
						} else {
							imgList.value.push(...chooseImageRes.tempFilePaths)
						}
					}
				});
			}
		})
		
	}
	// 删除图片
	const close = (index) => {
		imgList.value.splice(index, 1)
	}
</script>

<style lang="scss">
	.confirmOrderBottom {
		padding: 24rpx 43rpx;

		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 30rpx;
			}

			text {
				width: 30rpx;
			}

			font-size: 32rpx;
		}

		.bot {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;

			.left {
				display: flex;
				flex-direction: column;
				font-size: 24rpx;

				text {
					margin-top: 10rpx;
					color: #FF263F;
				}
			}

			.right {
				width: 190rpx;
				line-height: 80rpx;
				background: #FF263F;
				text-align: center;
				border-radius: 80rpx;
				color: #fff;

			}
		}
	}

	.confirmOrderBottom_1 {
		>view {
			justify-content: space-between;
			// padding: 37rpx 35rpx;
			background: #fff;
			display: flex;
			align-items: center;
			margin-top: 32rpx;

			.left {
				display: flex;
				align-items: center;

				image {
					width: 48rpx;
					margin-right: 25rpx;
				}

				font-size: 24rpx;
			}

			>image {
				width: 36rpx;
			}
		}
	}

	.detail-container {
		height: 100%;
		padding: 32rpx;
		padding-bottom: 180rpx;
		background: #fff;
		box-sizing: border-box;

		.detail-main {
			height: 100%;
			// padding-bottom: 180rpx;
			box-sizing: border-box;
			margin-top: 20rpx;

			.main-card {
				padding: 24rpx;
				background: #FFFFFF;
				border-radius: 24rpx;
				border: 1rpx solid rgba(107, 100, 211, 1);

				.card-title {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title-left {
						display: flex;
						align-items: center;

						.left-name {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 36rpx;
							color: #262626;
							line-height: 54rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}

						.left-border {
							display: flex;
							align-items: center;

							.border-item {
								padding: 6rpx 16rpx;
								box-sizing: border-box;
								background: #F4F6FA;
								border-radius: 8rpx 8rpx 8rpx 8rpx;
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 24rpx;
								color: #8C8C8C;
								line-height: 36rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-left: 12rpx;
							}
						}
					}

					.title-right {
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #8C8C8C;
						line-height: 42rpx;
						text-align: right;
						font-style: normal;
						text-transform: none;
					}
				}

				.card-num {
					margin-top: 12rpx;
					display: flex;
					align-items: center;

					.num-money {
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 32rpx;
						color: #6B64D3;
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}

					.num-time {
						padding: 6rpx 16rpx;
						box-sizing: border-box;
						background: #E4E2FC;
						border-radius: 8rpx 8rpx 8rpx 8rpx;
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 24rpx;
						color: #6B64D3;
						line-height: 36rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-left: 12rpx;
					}
				}

				.crad-info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 24rpx;

					.info-user {
						display: flex;
						align-items: center;

						image {
							width: 96rpx;
							height: 96rpx;
							border-radius: 50%;
						}

						.info-text {
							margin-left: 16rpx;

							.info-name {
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 36rpx;
								color: #262626;
								line-height: 54rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}

							.info-type {
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #8C8C8C;
								line-height: 42rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-top: 8rpx;
							}
						}
					}

					.info-money {
						display: flex;
						align-items: center;

						.money-text {
							display: flex;
							align-items: center;

							.hj {
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 28rpx;
								color: #FF263F;
								line-height: 42rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}

							.num {
								font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
								font-weight: normal;
								font-size: 36rpx;
								color: #FF263F;
								line-height: 54rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}

						.money-fs {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 32rpx;
							color: #FF8C00;
							line-height: 48rpx;
							text-align: left;
							font-style: normal;
							text-transform: none;
							margin-left: 16rpx;
						}
					}
				}

				.card-address {
					margin-top: 24rpx;

					.address-item {
						display: flex;
						align-items: center;
						justify-content: space-between;

						text {
							font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
							font-weight: normal;
							font-size: 32rpx;
							color: #595959;
							line-height: 48rpx;
							text-align: right;
							font-style: normal;
							text-transform: none;
						}
					}

					.address-item:nth-child(1) {
						margin-bottom: 24rpx;
					}
				}
			}

			.main-yq {
				padding-top: 32rpx;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				border-top: 1rpx solid #F4F6FA;
				box-sizing: border-box;
				margin-top: 32rpx;

				.yq-title {
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 42rpx;
					color: #000000;
					line-height: 64rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.ya-desc {
					margin-top: 16rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: normal;
					font-size: 32rpx;
					color: #595959;
					line-height: 48rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.yq-upload {
					display: flex;

					.upload-item {
						image {
							width: 200rpx;
							height: 200rpx;
						}
					}

					.imageList {
						width: 100%;
						margin-top: 30rpx;
						display: flex;
						flex-wrap: wrap;

						.videoWrap {
							width: 80%;
							height: 400rpx;
							margin-left: 10%;
							background: #000;
							border-radius: 16rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							overflow: hidden;
							position: relative;

							.videos {
								width: 90%;
								height: 90%;
							}

							.closes {
								width: 30rpx;
								height: 30rpx;
								position: absolute;
								z-index: 2;
								top: -20rpx;
								right: -20rpx;
							}
						}

						.imgWrap {
							width: 200rpx;
							height: 200rpx;
							// margin-left: 4%;
							border-radius: 16rpx;
							// margin-top: 20rpx;
							position: relative;

							.img {
								width: 200rpx;
								height: 200rpx;
								border-radius: 16rpx;
							}

							.close {
								width: 30rpx;
								height: 30rpx;
								position: absolute;
								z-index: 2;
								top: -15rpx;
								right: -15rpx;
							}
						}

						.addImg {
							background: #F5F5F5;
							border: 2rpx dashed #BFBFBF;
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
						}
					}
				}

				.ya-pj {
					margin-top: 16rpx;

					.pj-item {
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 28rpx;
						color: #262626;
						line-height: 42rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						display: flex;
						align-items: center;
					}

					.pj-item:nth-child(1) {
						margin-bottom: 16rpx;
					}
				}

				.yq-time {
					margin-top: 16rpx;

					.time-item {
						font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
						font-weight: normal;
						font-size: 32rpx;
						color: #595959;
						line-height: 48rpx;
						text-align: left;
						font-style: normal;
						text-transform: none;
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			height: 180rpx;
			padding: 24rpx;
			box-sizing: border-box;
			background: #fff;
			width: 100%;
			display: flex;
			align-items: center;

			.btns {
				width: 640rpx;
				height: 88rpx;
				background: #6B64D3;
				border-radius: 44rpx 44rpx 44rpx 44rpx;
				color: #fff;
				margin-left: 20rpx;
			}
		}
	}
</style>